<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>光大银行礼品兑换平台</title>
    <link rel="stylesheet" th:href="@{/user/reset.css}">
    <link th:href="@{/plugins/notification/snackbar/snackbar.min.css}" rel="stylesheet" type="text/css" />


    <link th:href="@{/plugins/sweetalerts/sweetalert2.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/plugins/sweetalerts/sweetalert.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/components/custom-sweetalert.css}" rel="stylesheet" type="text/css" />


    <style>
        .ui-main {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            margin: 0 auto;
            margin-bottom: 0;
            clear: both;
            overflow: hidden;
        }

        .top {
            height: 100px;
        }

        .form-group {
            margin-bottom: 25px;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .form-label {
            display: inline-block;
            cursor: pointer;
            color: #363A40;
            margin-bottom: 15px;
            font-size: 13px;
        }

        .form-input {
            display: block;
            width: 100%;
            padding: 10px 10px;
            border: 1px solid rgb(204, 213, 219);
            color: #363A40;
            border-radius: 5px;
            outline: none;
            font-size: 16px;
            box-sizing: border-box;
        }



        .title {
            padding: 0.25rem;
            width: 80%;
            height: 100%;
            font-size: 22px;
            margin: 0 auto;
            writing-mode: horizontal-tb;
            cursor: default;
            min-height: inherit;
            letter-spacing: 0em;
            color: rgb(103, 103, 103);
            text-align: center;
            writing-mode: horizontal-tb;
            font-weight: bold;
        }

        .subtitle {
            width: 80%;
            display: block;
            margin: 10px auto;
            color: inherit;
            word-break: break-all;
            text-indent: 0em;
            user-select: auto;
            font-size: 100%;
            text-align: center;
            font-size: 14px;
            color: rgb(103, 103, 103);
            writing-mode: horizontal-tb;
        }

        .selectAll {
            display: flex;

        }

        .selectAll select {
            width: 30%;
            margin-right: 20px;
            height: 40px;
            border-radius: 5px;
        }

        .selectAll select:last-child {
            margin-right: 0;
        }

        .text {
            width: 100%;
            height: 80px;
            margin-top: 8px;
            color: rgb(51, 51, 51);
            resize: none;
            padding: 10px 10px;
            border: 1px solid rgb(204, 213, 219);
            color: #363A40;
            border-radius: 5px;
            outline: none;
            font-size: 16px;
            box-sizing: border-box;
        }

        .form-submit {
            display: block;
            width: 100%;
            padding: 20px;
            color: white;
            text-align: center;
            cursor: pointer;
            border: 0;
            border-radius: 15px;
            background-color: #81C91D;
            font-size: 16px;
            box-shadow: 0 10px 20px -5px rgba(129, 201, 29, 0.9);
        }

        #success {
            text-align: center;
            margin-top: 200px;
            display: none;
        }

        #success img {
            width: 100px;
            height: 100px;
        }

        .success_text {
            color: #333333;
            font-size: 0.600rem;
            font-weight: 500;
            padding: 0px 0.500rem 0.600rem 0.500rem;
            word-wrap: break-word;
            word-break: break-all;
            margin-top: 20px;
        }
        .attention{
            color:rgb(186,193,197);
        }
        .attention_list{
            color:rgb(186,193,197);
            font-size:14px;
            display:flex;
            flex-direction:column;
        }
        .attention_list span {
            margin: 5px 0;
        }
        select {
            background-color: #fff;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            padding-left: 10px;
            border: 1px solid rgb(204, 213, 219)
        }

        input {
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none;
        }

        textarea {
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

    </style>
</head>

<body>
    <div class="ui-main">
        <div id="msg">
            <img ctype="lpHeadFigure" class="element comp_image editable-image"
                style="display: block; width: 100%; height: 100%; margin-left: 0px; margin-top: 0px;"
                th:src="@{/user/gift.jpg}">
            <div class="title">
                光大银行礼品兑换平台
            </div>
            <div class="subtitle">
                感谢您能抽出几分钟时间来填写以下内容，我们将尽快将您的礼品寄送给您！
            </div>
            <form action="" class="signup-form" onsubmit="return false" id="formtest">
                <div class="form-group">
                    <label class="form-label">姓名</label>
                    <input type="text" class="form-input" id="name" placeholder="请于持卡人姓名保持一致">
                </div>
                <div class="form-group">
                    <label class="form-label">电话</label>
                    <input type="number" class="form-input" id="phone"  oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请于持卡人联系方式保持一致">
                </div>
                <div class="form-group">
                    <label  class="form-label">收货地址</label>
                    <div class="selectAll">
                        <!--省份选择-->
                        <select id="prov" onchange="showCity(this)">
                            <option>请选择省份</option>
                        </select>
                        <!--城市选择-->
                        <select id="city" onchange="showCountry(this)">
                            <option>请选择城市</option>
                        </select>
                        <!--县区选择-->
                        <select id="country" onchange="selecCountry(this)">
                            <option>请选择县区</option>
                        </select>
                    </div>
                    <textarea type="text" id="address" maxlength="10000" class="text" placeholder="街道信息"></textarea>
                </div>
                <!-- 领取方式 -->
                <div class="form-group">
                    <label class="form-label">请选择领取方式</label>
                    <div class="selectAll">
                        <select id="isMail" style="width: 100%;font-size: 16px">
                            <option>请选择领取方式</option>
                            <option>快递</option>
                            <option>自取</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="form-label">授权码</label>
                    <input type="number" oninput="if(value.length>4)value=value.slice(0,4)" class="form-input" id="code" placeholder="授权码">
                </div>
                <div class="form-group">
                    <label class="form-label attention">注意事项：</label>
                    <div class="attention_list">
                        <span>1.请于持卡人（姓名，联系方式）信息保持一致。 </span>
                        <span>2.信息提交后需跟推荐人确认无误。</span>
                        <span>3.活动时间：2020年11月1日至2020年12月31日。 </span>
                    </div>
            </div>
                <div class="form-group">
                    <button class="btn met1 form-submit" onClick="showAddr()">提交</button>
                </div>
            </form>
        </div>
        <div id="success">
            <img th:src="@{/user/success.png}" alt="">
            <div class="success_text">您的信息已提交，谢谢您的参与！</div>
        </div>
    </div>
</body>

<script th:src="@{/user/city.js}"></script>
<script th:src="@{/user/method.js}"></script>
<!-- BEGIN THEME GLOBAL STYLE -->
<script th:src="@{/assets/js/scrollspyNav.js}"></script>
<script th:src="@{/plugins/sweetalerts/sweetalert2.min.js}"></script>
<script th:src="@{/plugins/sweetalerts/custom-sweetalert.js}"></script>
<script th:src="@{/plugins/notification/snackbar/snackbar.min.js}"></script>
<script th:src="@{/assets/js/libs/jquery-3.1.1.min.js}"></script>
<script>
    if ([[${tixing}]] ==0){
        swal({
            title: '请仔细阅读注意事项',
            padding: '2em'
        })
    }

    if ([[${activity}]] ==0){
        swal({
            title: '活动已结束，请联系推荐人',
            padding: '2em'
        })
    }

    if ([[${account}]] ==0){
        swal({
            title: '无效的推荐信息，请联系推荐人',
            padding: '2em'
        })
    }else{
        Snackbar.show({
            showAction: false,
            pos: 'top-center',
            text: "您的推荐人：[[${accountName}]],请确认无误！",
            actionTextColor: '#fff',
            backgroundColor: '#e2a03f'
        });
    }


    if ([[${gift}]] ==0){
        swal({
            title: '暂无活动名额，详情请联系推荐人！',
            padding: '2em'
        })
    }

    function showAddr() {
        var name = $('#name').val()
        var phone = $('#phone').val()


        var province = provice[current.prov].name;
        var city = provice[current.prov]["city"][current.city].name;
        var country = provice[current.prov]["city"][current.city].districtAndCounty[current.country];
        var isMail = $('#isMail option:selected').val();

        var address = $('#address').val()
        var code = $('#code').val()
        if(name == ""){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请填写姓名",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        if(phone == ""){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请填写电话",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        if(province == "请选择省份"){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请选择省份",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        if(city == "请选择城市"){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请选择城市",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        if(country == "请选择县区"){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请选择县区",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        if(address == ""){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请填写街道地址",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        if(isMail == "请选择领取方式"){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请选择领取方式",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        if(code == ""){
            Snackbar.show({
                showAction: false,
                pos: 'top-center',
                text: "请填写授权码",
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            return false;
        }
        var data =  {
            username : name,
            phone :phone,
            province :province,
            city :city,
            county :country,
            address :address,
            isMail :isMail,
            code : code
        }
        $.ajax({
            url: "/activity/subUser",
            method: "POST",
            data : data,
            success: function (result) {
                if(result.code == "500"){
                    Snackbar.show({
                        showAction: false,
                        pos: 'top-center',
                        text: result.msg,
                        actionTextColor: '#fff',
                        backgroundColor: '#e7515a'
                    });
                }else if(result.code == "200"){
                    Snackbar.show({
                        pos: 'top-center',
                        text: result.msg,
                        actionTextColor: '#fff',
                        backgroundColor: '#8dbf42'
                    });
                    $('#success').show();
                    $('#msg').hide();
                }
            },
            error : function() {
                Snackbar.show({
                    showAction: false,
                    pos: 'top-center',
                    text: '申请人数过多，请稍后再试',
                    actionTextColor: '#fff',
                    backgroundColor: '#e7515a'
                });
            }
        })
    }
</script>
<!-- END THEME GLOBAL STYLE -->
</html>
